<template>
  <div>
    <p>请输入数量:{{ count }}</p>
    <button @click="count = count + 2">每次加2</button>
    <button @click="addFn">增加</button>
    <button @click="subFn">减少</button>
    <button @click="sumFn(10)">每次加10</button>
    <hr />

    <!-- v-on事件对象  ----接收事件对象---阻止默认行为 -->
    <a :href="url" @click="fn1">百度</a>
    <hr />
    <a :href="myurl" @click="fn2(5, $event)">淘宝</a>

    <!-- v-on 修饰符 -->
    <div @click="fatherFn">
      <p @click.stop="pFn">点击me</p>
      <a :href="url" @click.prevent.stop="aFn">去百度</a>
      <h1 @click.once="hFn">点击我只触发一次事件处理函数</h1>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      url: "http://www.baidu.com",
      myurl: "http://www.taobao.com",
    };
  },
  methods: {
    addFn() {
      this.count++;
    },
    subFn() {
      this.count--;
    },
    sumFn(num) {
      this.count = this.count + num;
    },
    fn1(e) {
      e.preventDefault();
    },
    fn2(n, e) {
      e.preventDefault();
    },
    fatherFn() {
      console.log("我是div盒子");
    },
    pFn() {
      console.log(".stop阻止冒泡");
    },
    aFn() {
      console.log(".prevent阻止默认行为");
    },
    hFn() {
      console.log(".once只触发一次事件处理函数");
    },
  },
};
</script>

<style>
</style>